import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import Dialog from '../../components/login'
import { post } from '../../service/api'
import './picItem.scss'

class PicItem extends Component {
	constructor() {
		super(...arguments)
		this.state = {
			login: false,
			isShowDialog: false
		}
	}
	async cardFind() {
		const { data } = await post('vipCard/find');
		if (data.code == 0) {
			this.setState({
				login: true,
				isShowDialog: false
			})
		}
	}
	toProgram(item) {
		let { login } = this.state, number = Taro.getStorageSync('number');
		number ? Taro.setStorageSync('number', ++number) : Taro.setStorageSync('number', 1)
		if (login) {
			Taro.navigateTo({ url: `/pages/program/index?id=${item._id}` })
		} else {
			if (number > 20) {
				this.setState({
					isShowDialog: true
				})
				return;
			}
			Taro.navigateTo({ url: `/pages/program/index?id=${item._id}` })
		}
	}
	componentDidMount() {
		this.cardFind()
	}
	render() {
		const { padding, list } = this.props;
		return (
			<View className={padding ? "d-list padding" : "d-list"}>
				{list.map((item) => {
					return (
						<View className="d-item" key={item._id} onClick={this.toProgram.bind(this, item)}>
							<View className="qj">360°全景</View>
							<Image className="img-logo" src={item.logo} />
							<View className="d-item-txt">
								<View className="d-item-title">{item.title}</View>
								<View className="area">
									<Image className="img" src={require('../../asset/imgs/mj.png')} /> <Text className="area-num">{item.acre}㎡</Text>
									<Image className="img" src={require('../../asset/imgs/ys.png')} /> <Text>{item.sum / 10000}万</Text>
								</View>
							</View>
						</View>
					)
				})}
				{isShowDialog && <Dialog title="成为欢乐家会员海量方案等你来选" onHandleDialog={this.handleDialog} />}
			</View>

		)
	}
}
PicItem.defaultProps = {
	list: []
}
export default PicItem
